<template>
  <div class="shopApply-box">
    <nav-com
      title="网店申请"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <div class="shop-form">
      <div class="shop-info">
        <div class="title">信息</div>
        <van-cell-group>
          <van-field name="radio" label="小店类型">
            <template #input>
              <van-radio-group v-model="form.state" direction="horizontal">
                <van-radio name="0">个人</van-radio>
                <van-radio name="1">公司</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.name"
            name="name"
            label="联系人"
            placeholder="请输入姓名"
          />
          <van-field
            v-model="form.mobile"
            label="联系电话"
            name="mobile"
            readonly
            placeholder="请输入电话号码"
          />
        </van-cell-group>
      </div>
      <div class="real_box">
        <div class="real_text">请上传身份证的正反面</div>
        <div class="real_group">
          <div class="real_title">
            <div class="t0">头像面</div>
            <div class="t1">上传您的身份证头像面</div>
          </div>
          <div class="real_ps" v-if="form.check_status=='1'||form.check_status=='2'||form.check_status=='3'">
            <div class="real_photo_btn">
                <img :src="form.image" />
              </div>
          </div>
          <div class="real_ps" v-else>
            <van-uploader v-model="fileList" :after-read="afterRead"  :before-delete="beforeDel">
              <div :style="{ display: styledisplay }" class="real_photo_btn">
                <img src="@/assets/shop/id_qm.png" />
              </div>
            </van-uploader>
          </div>
        </div>
        <div class="real_group">
            <div class="real_title">
            <div class="t0">国徽面</div>
            <div class="t1">上传您的身份证国徽面</div>
          </div>
          <div class="real_ps" v-if="form.check_status=='1'||form.check_status=='2'||form.check_status=='3'">
            <div class="real_photo_btn">
                <img :src="form.image1" />
              </div>
          </div>
          <div class="real_ps" v-else>
            <van-uploader v-model="fileList1" :after-read="afterRead1"  :before-delete="beforeDel1">
              <div :style="{ display: styledisplay1 }" class="real_photo_btn">
                <img src="@/assets/shop/id_bg.png" />
              </div>
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="online_img">
        <div class="real_text">请上传营业执照（公司）</div>
        <div class="real_group" style="justify-content:center;">
          <div class="real_ps" v-if="form.check_status=='1'||form.check_status=='2'||form.check_status=='3'">
            <div class="real_photo_btn">
                <img :src="form.image1" />
              </div>
          </div>
          <div class="real_ps" v-else>
            <van-uploader v-model="fileList2" :after-read="afterRead2"  :before-delete="beforeDel2">
                <div :style="{ display: styledisplay2 }" class="real_photo_btn">
                <img src="@/assets/shop/onsale_img.png" />
                </div>
            </van-uploader>
          </div>
        </div>
      </div>
    </div>
    <!-- 0 未提交 //1审核中 2审核通过 3 审核不通过 -->
     <div class="real_bottom" v-if="form.check_status=='1'||form.check_status=='2'||form.check_status=='3'">
           <van-button  disabled block v-if="form.check_status=='1'" @click="toeditShop">审核中</van-button>
           <van-button  disabled block v-if="form.check_status=='3'" >审核不通过</van-button>
           <van-button @click="toallShop" type="success" block v-if="form.check_status=='2'">审核通过(去我的店铺)</van-button>
      </div>
      <div class="real_bottom" v-else>
           <van-button @click="toSubmit" :disabled="LOADING" block>提交</van-button>
      </div>
  </div>
</template>

<script>
import { shopentry, shopauthdetail, postImages2 } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import Upgrade from "@/component/upgrade.vue";
import {Toast, Form, Field, CellGroup} from "vant";
export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      showView: true,
      LOADING: false,
      show: false,
      styledisplay: "block",
      styledisplay1: "block",
      styledisplay2: "block",
      fileList: [],
      fileList1: [],
      fileList2: [],
      form: {
        mobile: weixin.loginMobile(),
        state: "", //店铺类型:0=个人,1=企业
        name: "",
        image: "",
        image1: "",
        image2: "",
      },
    };
  },
  mounted() {
    this.init();
    if (this.$route.query.params) {
      this.form = this.$route.query.params;
    }
  },
  methods: {
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    init(){
      shopauthdetail({ mobile: weixin.loginMobile()}).then((res) => {
          if (res.data.code == 1) {
            if (res.data.data) {
              this.form = res.data.data;
              if(res.data.data.image){
                this.styledisplay = "none";
                 this.fileList.push({url:res.data.data.image})
              }
              if(res.data.data.image1){
                this.styledisplay1 = "none";
                 this.fileList1.push({url:res.data.data.image1})
              }
              if(res.data.data.image2){
                this.styledisplay2 = "none";
                 this.fileList2.push({url:res.data.data.image2})
              }
            } 
          }
        });
    },
    toallShop(){
        this.$router.push({
          name: "allshopgoods",
          params: { id:this.form.id }
        })
    },
    //图片上传
    afterRead(file) {
      if (this.fileList.length > 0) {
        this.styledisplay = "none";
      }

      let that = this;
      let funBack = function (file) {
        var fd = new FormData();
        fd.append("file", file);
        postImages2(fd).then((res) => {
          console.log(res);
          that.form.image = res.data.data.fullurl;
          that.styledisplay = "none";
          that.$forceUpdate();
        });
      };
      weixin.uploadIF(file, funBack);
      return false;
    },
    beforeDel(file) {
      if (this.fileList.length > 0) {
        this.styledisplay = "block";
      } else {
        this.styledisplay = "none";
      }
      return true;
    },
    afterRead1(file) {
      if (this.fileList1.length > 0) {
        this.styledisplay1 = "none";
      }
      let that = this;
      let funBack = function (file) {
        var fd = new FormData();
        fd.append("file", file);
        fd.append("albumId", "10001");
        postImages2(fd).then((res) => {
          console.log(res);
          that.form.image1 = res.data.data.fullurl;
          that.styledisplay1 = "none";
          that.$forceUpdate();
        });
      };
      weixin.uploadIF(file, funBack);
      return false;
    },
     beforeDel1(file) {
      if (this.fileList1.length > 0) {
        this.styledisplay1 = "block";
      } else {
        this.styledisplay1 = "none";
      }
      return true;
    },
    afterRead2(file) {
      if (this.fileList2.length > 0) {
        this.styledisplay2 = "none";
      }
      let that = this;
      let funBack = function (file) {
        var fd = new FormData();
        fd.append("file", file);
        fd.append("albumId", "10001");
        postImages2(fd).then((res) => {
          console.log(res);
          that.form.image2 = res.data.data.fullurl;
          that.styledisplay2 = "none";
          that.$forceUpdate();
        });
      };
      weixin.uploadIF(file, funBack);
      return false;
    },
     beforeDel2(file) {
      if (this.fileList2.length > 0) {
        this.styledisplay2 = "block";
      } else {
        this.styledisplay2 = "none";
      }
      return true;
    },
    toSubmit() {
      if(this.form.state!=='0'&&this.form.state!=='1'){
        Toast("请选择小店类型");
        return
      }
      if(!this.form.name){
        Toast("请填写联系人");
        return
      }
      if(!this.form.mobile){
        Toast("请填写联系电话");
        return
      }
      console.log("this.form",this.form)
      if(!this.form.image){
        Toast("请上传您的身份证头像面");
        return
      }
      if(!this.form.image1){
        Toast("请上传您的身份证国徽面");
        return
      }
      if(!this.form.image2){
        Toast("请上传营业执照（公司）");
        return
      }
        shopentry(this.form).then((res) => {
           if (res.data.code == 1) {
            Toast("已申请成功，去完善店铺！");
            this.LOADING=true
            setTimeout(() => {
              this.$router.push({ name: "editShop"});
            }, 1500);
         } else {
           Toast(res.data.msg);
         }
        });
    },
    toeditShop(){
      Toast("审核中，去完善店铺！");
      this.LOADING=true
      setTimeout(() => {
        this.$router.push({ name: "editShop"});
      }, 1000);
    }
  },
};
</script>
<style scoped>
.shopApply-box {
  background: #f8f8f8;
  min-height: 100vh;
}
.shop-form{
    /* margin-bottom: 50px; */
}
.shop-info {
  margin: 10px;
  background: #ffffff;
  border-radius: 10px;
}
.shop-info .title {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 24px;
  padding-top: 17px;
  padding-left: 15px;
}
.real_box,
.online_img {
  margin: 10px;
  background: #ffffff;
  border-radius: 10px;
  padding: 17px 15px 15px;
}
.real_text {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 24px;
  margin-bottom: 10px;
}
.real_group {
  background: #FAF9F7;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px 8px;
}
.real_title .t0 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
}
.real_title .t1 {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
}
.real_ps,.real_photo_btn img {
  max-width: 167px;
  height: 110px;
}
.online_img .real_ps,.online_img .van-uploader__preview-image{
    max-width: 167px;
    height: 110px;
}
.real_bottom{
    /* position: fixed;
    bottom: 10px; */
    background: #ffffff;
    /* left: 10px;
    right: 10px;
    width: 100%; */
    margin-bottom: 10px;
}
.real_bottom .van-button--block{
   background: #FE4B20;
   color: #ffffff;
   width: calc(100% - 20px);
   border: none;
   margin: 0 auto;
}
/deep/.van-image__img{border-radius:0;}
/deep/.van-uploader__preview-image{
  width: 167px;
  height: 110px;
}
</style>
